﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dran and Drop Test</title>
    <script src="../Common/IndustrialDashboard.js" type="text/javascript"></script>
    <script src="../Common/Common.js" type="text/javascript"></script>
    <script src="../Common/ParseAttributes.js" type="text/javascript"></script>
    <style type="text/css">
        
    </style>
    <script language="javascript" type="text/javascript">
        var WREF = {};
        WREF.DragedObjDIV = null;
        WREF.DropObjDIV = null;
        WREF.LogDIV = null;
        WREF.MoveActive = false;
        WREF.PosX = null;
        WREF.PosY = null;

        WREF.Log = function Log(message) {
            try {
                WREF.LogDIV.innerHTML += message + "<br>";
            }
            catch (Error) { Common.ShowError(Error); }
        };

        WREF.DragedObjDIV_MouseDown = function DragedObjDIV_MouseDown(e) {
            try {
                WREF.MoveActive = true;

                var evt = (typeof (e) != "undefined") ? e : window.event;
//                var target = (typeof (e) != "undefined") ? e.target : window.event.srcElement;

                WREF.PosX = evt.screenX;
                WREF.PosY = evt.screenY;
            }
            catch (Error) { Common.ShowError(Error); }
        };
        WREF.DragedObjDIV_MouseMove = function DragedObjDIV_MouseMove(e) {
            try {
                if (WREF.MoveActive == true) {
                    var evt = (typeof (e) != "undefined") ? e : window.event;

//                    WREF.Log("top " + evt.screenY.toString());
//                    WREF.Log("left " + evt.screenX.toString());
                    
                    var deltaPosX = evt.screenX - WREF.PosX;
                    var deltaPosY = evt.screenY - WREF.PosY;

                    WREF.PosX = evt.screenX;
                    WREF.PosY = evt.screenY;

                    WREF.DragedObjDIV.style.top = (parseInt(WREF.DragedObjDIV.style.top) + deltaPosY).toString() + "px";
                    WREF.DragedObjDIV.style.left = (parseInt(WREF.DragedObjDIV.style.left) + deltaPosX).toString() + "px";
                }
            }
            catch (Error) { Common.ShowError(Error); }
        };
//        WREF.DragedObjDIV_MouseOut = function DragedObjDIV_MouseOut(e) {
//            try {
//                WREF.MoveActive = false;
//            }
//            catch (Error) { Common.ShowError(Error); }
//        };
        WREF.DragedObjDIV_MouseUp = function DragedObjDIV_MouseUp(e) {
            try {
                WREF.MoveActive = false;
            }
            catch (Error) { Common.ShowError(Error); }
        };
        WREF.DropObjDIV_MouseOver = function DropObjDIV_MouseOver(e) {
            try {
                WREF.Log("Over");
            }
            catch (Error) { Common.ShowError(Error); }
        };

        attachDomReadyEventHandler(function () {
            try {
                WREF.DragedObjDIV = document.getElementById("DragedObj");
                addEventHandler(WREF.DragedObjDIV, "onmousedown", WREF.DragedObjDIV_MouseDown);
                addEventHandler(WREF.DragedObjDIV, "onmousemove", WREF.DragedObjDIV_MouseMove);
//                addEventHandler(WREF.DragedObjDIV, "onmouseout", WREF.DragedObjDIV_MouseOut);
                addEventHandler(WREF.DragedObjDIV, "onmouseup", WREF.DragedObjDIV_MouseUp);

                WREF.DropObjDIV = document.getElementById("DropObj");
                addEventHandler(WREF.DropObjDIV, "onmouseover", WREF.DropObjDIV_MouseOver);

                WREF.LogDIV = document.getElementById("Log");
            }
            catch (Error) { Common.ShowError(Error); }
        });

    </script>
</head>
<body style="position:fixed;height:100%;width:100%;display:inline-block;text-align:center;background-color:Gray;">
    <div id="DragedObj" style="position:absolute;margin:0;padding:0;top:0px;left:0px;height:50px;width:50px;display:inline-block;background-color:Red;z-index:1;"></div>
    <div id="Log" style="position:relative;float:right;width:10%;height:100%;border:1px solid #ACA7A7;display:inline-block;background-color:Yellow;"></div>
    <div id="DropObj" style="position:relative;float:right;margin-left:30%;height:100%;width:10%;display:inline-block;background-color:Black;"></div>
    <!--<div id="Log2" style="position: absolute;left: 80%;width:10%;height:100%;display:inline-block;"></div>-->
</body>
</html>
